import React from 'react'
import Link from 'next/link'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { loginOut } from '../../store/user.redux'
import { reset } from '../../store/blog.redux'

class LoginOutMenu extends React.Component {
    constructor(props) {
        super(props)
    }

    loginOut() {
        this.props.loginOut()
        this.props.reset()
    }

    render() {
        return (
            <div className="loginOutMenu">
                <div className="user-img">
                    <img src={this.props.userImg} />
                    <div className="user-info">
                        <ul>
                            <li className="info-li">
                                <Link href="/blog" prefetch><a>写文章</a></Link>
                            </li>
                            <li className="line" />
                            <li className="info-li">
                                <Link href="/collect"><a>收藏</a></Link>
                            </li>
                            <li className="line" />
                            <li className="info-li">
                                <Link href="/me"><a>我的</a></Link>
                            </li>
                            <li className="line" />
                            <li className="info-li">
                                <a onClick={() => {
                                    this.loginOut()
                                }}>退出</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <style jsx> {`
                 .loginOutMenu {
                    flex: 0 0 180px;
                    text-align: right;
                }
                img {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    box-shadow: 1px 1px 1px 1px #e3e2e2;
                }
                a {
                    display: inline-block;
                    color: #067df7;
                    text-decoration: none;
                    font-size: 13px;
                }
                .user-img {
                    position: relative;
                    margin-right: 30px;
                    display: inline-block;
                    width: 30px;
                    height: 30px;
                    cursor: pointer;
                }
                .user-info {
                    display: none;
                    position: absolute;
                    top: 28px;
                    right: 2px;
                }
                 .user-img:hover .user-info,.user-img:focus .user-info{
                    display: block;
                }
                .user-info:hover,.user-info:focus {
                    display: block;
                }
                .user-info ul{
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    box-shadow: 0 0 1px 1px #cbcbcb;
                    background-color: #ffffff;
                    border-radius: 2px;
                }
                .info-li {
                    padding: 5px 10px;
                    width: 60px;
                }
                .line{
                    margin: 0 auto;
                    height: 1px;
                    width: 80%;
                    background-color: #dedcdc;
                }
        `} </style>
            </div>)
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        loginOut: bindActionCreators(loginOut, dispatch),
        reset: bindActionCreators(reset, dispatch)
    }
}

export default connect(null, mapDispatchToProps)(LoginOutMenu)